import Vue from "vue";
import $ from "jquery";
import com from "../../utils/common";
let userJoin = {};
userJoin.Temp = `  
  <div class="pop_mask">
      <div class="pop_user_msg">
          <div class="container">
              <form name="reg_form">
                  <input type="hidden" id="gid" name="gid" value="">
                  <header>
                      <h3>所填信息不会被公开，仅用于活动兑奖。</h3>
                      <p>注意:
                          <i>*</i>为必填项</p>
                  </header>
                  <div class="content">
                      <div>
                          <p>
                              <i>*</i>
                              <span>姓名</span>
                              <b>:</b>
                          </p>
                          <input id="regname" name="name" v-model="Name"  placeholder="请输入报名用户的真实姓名">
                      </div>
                      <div>
                          <p>
                              <i>*</i>
                              <span>手机</span>
                              <b>:</b>
                          </p>
                          <input id="mobile" name="mobile" v-model="Mobile" type="number" inputmode="numeric" pattern="[0-9]*" placeholder="请输入报名人的手机号码">
                      </div>
                      <div v-for="(item ,index) in othermsg" v-if="item.Name">
                          <div v-if="item.Name && item.IsMust">
                              <p>
                                  <i>*</i>
                                  <span :id="'otherJoin' + index">{{item.Name}}</span>
                                  <b>:</b>
                              </p>
                              <input :id="'More' + index" type="text" placeholder="此项必填">
                          </div>
                          <div v-if="item.Name && item.IsMust == false">
                              <p>
                                  <span :id="'otherJoin' + index">{{item.Name}}</span>
                                  <b>:</b>
                              </p>
                              <input :id="'More' + index" type="text" placeholder="此项选填">
                          </div>
                      </div>
                  </div>
                  <footer id="signUp">
                      <a href="javascript:;" v-on:click="JoinAct">提交</a>
                  </footer>
                  <p class="back_mine" v-on:click="BackMine">我已报名,回到
                      <a href="javascript:;">我的页面</a>
                  </p>
              </form>
          </div>
      </div>
     
  </div>
`;
let UserJoin = Vue.extend({
  template: userJoin.Temp,
  props: ["othermsg"],
  data: function(){
    return {
      Name:'',
      Mobile:'',
      More0:'',
      More1:'',
      More2:'',
    }
  },
  methods: {
    JoinAct: function () {
      let JoinMsg = {};
      JoinMsg.Name = this.Name;
      JoinMsg.Mobile = this.Mobile;
      let Other = {};
      console.log(this.othermsg);
      if(this.othermsg[0].Name){
        Other[this.othermsg[0].Name] = $("#More0").val();
      }
      if(this.othermsg[1].Name){
        Other[this.othermsg[1].Name] = $("#More1").val();
      }
      if(this.othermsg[2].Name){
        Other[this.othermsg[2].Name] = $("#More2").val();
      }
      console.log(Other);
      JoinMsg.Other = JSON.stringify(Other)
      console.log(JoinMsg);
      if(com.CheckMobile(JoinMsg.Mobile)){
        this.$emit('join', JoinMsg);
      }else{
        com.alertDialog("号码错误,请核对");
      }

    },
    BackMine:function () {
      this.$emit('back');
    }
  }
});
export default UserJoin;
